<template>

  <div class="back-user-content">
    <el-form>
      <el-input placeholder="根据用户名搜索" style="width:20%" />
      <el-button style="margin:0 20px">清空</el-button>
      <el-button type="primary">搜索</el-button>
      <el-button type="success" style="float:right" @click="handleAddUSer">新增用户</el-button>

      <el-alert
        :title="`共${total}条记录`"
        type="info"
        show-icon
        :closable="false"
        style="margin:20px 0"
      />
      <el-table
        :data="tableData"
        style="width: 100%;margin-top:20px"
        max-height="250"
        border
      >
        <el-alert
          title="消息提示的文案"
          type="info"
          show-icon
        />
        <el-table-column
          fixed
          type="index"
          :index="indexMethod"
          label="序号"
          width="150"
        />
        <el-table-column
          prop="email"
          label="邮箱"
          width="120"
        />
        <el-table-column
          prop="phone"
          label="联系电话"
          width="120"
        />
        <el-table-column
          prop="username"
          label="用户名"
          width="120"
        />
        <el-table-column
          prop="permission_group_id"
          label="权限组名称"
          width="300"
        />
        <el-table-column
          prop="role"
          label="角色"
          width="120"
        />
        <el-table-column
          fixed="right"
          label="操作"
          width="120"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click.native="deleteRow(scope.row.id)"
            >
              删除
            </el-button>
            <el-button
              type="text"
              size="small"
              @click.native="editUser(scope.row.id)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <!-- 控制新增用户弹窗显示 -->
    <add-user :show-dialog.sync="showDialog" @handleclose="handleclose" @getUserList="getUserList" />
    <!-- 用户编辑弹框 -->
    <edit-user :id="id" :show2.sync="show2" @handleEditclose="handleEditclose" @getUserList="getUserList" />
    <!-- 分页组件 -->
    <el-pagination
      :current-page="query.page"
      :page-sizes="[4, 5, 10, 19]"
      :page-size="query.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    />
  </div>
</template>

<script>
import { getUSerListAPI, delUserAPI } from '@/api/user'
import AddUser from '../components/add-user.vue'
import EditUser from '../components/edit-user.vue'

export default {
  name: 'Backuser',
  components: { AddUser, EditUser },
  data() {
    return {
      id: '',
      total: 0,
      query: {
        page: 1,
        pagesize: 5,
        keyword: ''
      },
      showDialog: false,
      show2: false,
      tableData: []
    }
  },
  created() {
    this.getUserList()
  },
  methods: {
    // 编辑用户
    editUser(row) {
      this.id = row + ''
      this.show2 = true
    },
    indexMethod(index) {
      // 当前页数据的序号+1 +（当前页码-1）*每页条数
      return index + 1 + (this.query.page - 1) * this.query.pagesize
    },
    // 获取用户列表
    async getUserList() {
      const resp = await getUSerListAPI(this.query)
      this.total = resp.counts
      this.tableData = resp.list
    },
    // 删除用户
    async deleteRow(row) {
      await delUserAPI(row)
      this.$message.success('删除成功')
      this.getUserList()
    },
    handleclose() {
      this.showDialog = false
    },
    handleEditclose() {
      this.show2 = false
    },
    // 新增用户
    handleAddUSer() {
      this.showDialog = true
    }

  }
}
</script>
<style scoped lang="scss">
.el-form{
padding: 20px;

}

</style>
